<template>
  <!-- 宠物寄养页面的商家卡片 -->
  <div class="board-card">
    <!-- 使用van-list实现分页加载 -->
    <van-list v-model="loading" :finished="finished" finished-text="我是有底线的~" @load="onLoad">
      <!-- 一个卡片 -->
      <div
        @click="goBusiness(item.b_id)"
        class="item-card"
        v-for="item in busData"
        :key="item.b_id"
      >
        <!-- 店铺评分 -->
        <div class="star">
          <img src="@/assets/img/jiyang/star.png" alt />
          <span class="score">{{item.b_score}}</span>
        </div>
        <!-- 店铺图片 -->
        <img :src="item.b_img" alt />

        <div class="zdy-home">
          <!-- 商家名称 -->
          <div class="home-name">
            <span>{{item.b_name}}</span>
            <img src="@/assets/img/jiyang/renzheng.png" alt />
          </div>
          <!-- 所在城市 -->
          <span class="city-name">{{item.b_city}}</span>
        </div>

        <div class="icon-price">
          <span class="btn">{{item.b_feature}}</span>
          <span class="day-price">￥{{item.b_price}}/天</span>
        </div>
      </div>
    </van-list>
    <div class="footer" style="width:100%;height:5rem;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      finished: false,
      page: 1, // 当前页码
      pageSize: 3, //一页显示的条数
      busData: [] // 接收服务端返回来的商家数据
    };
  },
  methods: {
    // 获取服务端商家列表数据
    onLoad() {
      this.http
        .get(`${this.$api.getBusAll}/${this.page}/${this.pageSize}`)
        .then(res => res.data)
        .then(res => {
          if (res.code == 200) {
            this.busData.push(...res.data);
            this.page++;
            this.loading = false;
          } else {
            this.finished = true;
          }
        });
    },
    // 跳转到商家详情
    goBusiness(b_id) {
      console.log(b_id);
      this.$router.push("/business/" + b_id);
    }
  }
};
</script>

<style lang="scss" scoped>
.board-card {
  background-color: #f2f2f2;
  overflow: hidden;

  .item-card {
    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2),
      0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
    background-color: #fff;
    width: 90%;
    height: 30rem;
    margin: 2rem auto;
    border-radius: 0.5rem;
    position: relative;

    .star {
      position: absolute;
      top: 1.5rem;
      left: 2rem;
      display: flex;
      width: 6rem;
      height: 2.5rem;
      background-color: #fff;
      border-radius: 0.5rem;
      justify-content: center;
      align-items: center;

      img {
        width: 1.6rem;
        display: block;
      }
      span {
        padding-left: 0.5rem;
        font-size: 1.4rem;
        display: block;
        color: #36343c;
        // text-shadow: 0 0 0.1rem #000000;
      }
    }
    img {
      width: 100%;
      height: 60%;
      object-fit: cover;
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
    }

    .zdy-home {
      width: 94%;
      margin: auto;
      display: block;
      height: 6rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .home-name {
        width: 25rem;
        display: flex;
        align-items: center;

        span {
          font-size: 1.6rem;
          font-weight: bold;
          display: block;
        }
        img {
          display: block;
          width: 1.6rem;
          height: 1.6rem;
        }
      }

      .city-name {
        display: block;
        color: #b6b4c0;
        font-size: 1.2rem;
      }
    }

    .icon-price {
      margin: 1rem auto;
      width: 94%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        display: block;
        font-size: 1.2rem;
      }
      .btn {
        border-radius: 0.6rem;
        background-color: #efedfd;
        color: #8d73ec;
        padding: 0.5rem;
      }
    }
  }
}
</style>